<template>
    <div class="sure-order-container">
        <div class="have-address-box" v-if="haveAddress" @click="selectBtn">
            <p class="address-person">收货人： {{addressItem[0].name}}<span>{{addressItem[0].telephone}}</span></p>
            <p class="address-info">
                收货地址： {{addressItem[0].city}}  {{addressItem[0].detailAddress}}
            </p>
        </div>
        <router-link tag="div" class="no-adress-box" v-else to="/add_address" >
            新建收货地址
        </router-link>
        <div class="vip-card-order">
            <div class="card-detail">
                <img :src="imgUrl" alt="">
                <div class="detail-intro">
                    <p>每日听书VIP实体卡</p>
                    <p><span class="price">¥{{price}}</span><span>数量：{{num}}</span></p>
                </div>
            </div>
            <div class="all-price">
                合计：<span>¥{{allprice}}</span>
            </div>
        </div>
        <div class="pay-style-box">
            <div class="title">支付方式</div>
        </div>
        <pay-style v-if="isAgent" type=0 iswechat=false :pay="payStyles" @changePay="changePay" :balance="orderInfo.balance"></pay-style>
        <pay-style v-if="!isAgent" iswechat=false type=2 :pay="payStyles" @changePay="changePay" :balance="orderInfo.balance"></pay-style>            
        <pay-style v-if="!isAgent" iswechat=true type=1 :pay="payStyles" @changePay="changePay"></pay-style>
        <!-- <pay-style :iswechat="false" :pay="payStyles" @changePay="changePay" :balance="orderInfo.balance"></pay-style> -->
        <div class="footer-pay-box" @click="payCard">立即支付</div>
        <address-box v-if="showAddress" @cancelAddress="cancelAddress" @selectAddress="selectAddress"></address-box>
        <com-dialog v-if="showConfirm" :dialogConent="confrimConent" @leftBtn="cancelPay" @rightBtn="confirmBtn"></com-dialog>
        <com-dialog v-if="showDialog" :dialogConent="dialogConent" @leftBtn="cancelBtn" @rightBtn="sureBtn"></com-dialog>
        <com-dialog v-if="showMoneny" :dialogConent="dialogNomoney" @leftBtn="cancelBtn" @rightBtn="cancelBtn"></com-dialog>
    </div>
</template>
<script>
    import comDialog from '@/components/comDialog.vue'
    import addressBox from '../addressBox.vue'
    import payStyle from '../payStyle.vue'
    import cookie from '../../../../util/cookie.js'
    import { post } from '../../../../util/http.js'
    import market from '@/api/market.js'
    export default {
        components: {
            comDialog,
            addressBox,
            payStyle
        },
        data () {
            return {
                addressItem: [],
                haveAddress: false,
                showConfirm: false,
                showDialog: false,
                showMoneny: false,
                confrimConent: {
                    title: '购买成功<br/>请前往“我的订单”中查看',
                    left: '取消',
                    right: '立即前往'
                },
                dialogConent: {
                    title: '您还未设置收货地址<br/>快去设置吧～',
                    left: '取消',
                    right: '设置'
                },
                dialogNomoney: {
                    title: '账户余额不足！<br/>请联系懂行客服充值',
                    left: '取消',
                    right: '确认'
                },
                showAddress: false,
                payStyles: [
                    {
                        isRem: true,
                        isEnough: true
                    },
                    {
                        isRem: false,
                        isEnough: true
                    },
                    {
                        isRem: false,
                        isEnough: true
                    }
                ],
                price: cookie.get('vipcardprice'),
                num: cookie.get('num'),
                allprice: cookie.get('allprice'),
                isAgent: '',
                agentId: '',
                orderInfo: '',
                isEnough: '',
                imgUrl: cookie.get('img')
            }
        },
        created () {
            market.confirmInfo({
                agentId: JSON.parse(localStorage.getItem('dongHang_data')).agentId,
                type: 2
            }).then (res => {
                if (res.code == 0) {
                    this.orderInfo = res.t
                }
            });
			this.price = cookie.get('vipcardprice');
        },
        mounted() {
            this.isAgent = localStorage.getItem('dongHang_data') ? true : false
            this.agentId = this.isAgent ? JSON.parse(localStorage.getItem('dongHang_data')).agentId : ''
            this.level = this.isAgent ? JSON.parse(localStorage.getItem('dongHang_data')).level : -1
            this.uid = JSON.parse(localStorage.getItem('dongHang_common_user')) ? JSON.parse(localStorage.getItem('dongHang_common_user')).uid : ''
            this.payStyles[0].isEnough = this.orderInfo.balance - this.totalprice > 0 ? true : false;
			this.price = cookie.get('vipcardprice');
            this.$nextTick(() => {
                let info = JSON.parse(window.localStorage.getItem('dongHang_data'))
                post('http://dlsapi.rz158.com/address/selectAddress', {
                    agentId: info.agentId
                }).then(res => {
                    if(res.code != 0) {
                        Toast({
                            message: res.message,
                            duration: 1000
                        })
                    } else {
                       this.addressItem =  res.t.filter(item => {
                            return item.isDefault == 1
                       })
                       if(this.addressItem.length > 0) {
                           this.haveAddress = true
                       }
                    }
                })
            })
        },
        methods: {
            selectAddress(addressItem){
                this.showAddress = false
                this.addressItem[0] = addressItem
            },
            payCard () {
                if (this.haveAddress == false) {
                    this.showDialog = true
                } else {
                    market.addOrder({
                        agentId: this.agentId,
                        originalPrice: 19900,
                        presentPrice: (parseInt(cookie.get('vipcardprice')  * 100)),
                        buyNum: this.num,
                        receiveId: this.addressItem[0].id
                    }).then(res => {
                        if (res.code == 0) {
                            this.showConfirm = true
                            market.confirmInfo({
                                agentId: JSON.parse(localStorage.getItem('dongHang_data')).agentId,
                                type: 2
                            }).then (res => {
                                if (res.code == 0) {
                                    this.orderInfo = res.t
                                }
                            })
                        } else if (res.code == -2) {
                            this.showMoneny = true
                        } else if (res.code == -3){
                            this.showDialog = true
                        }
                    })
                }
            },
            cancelPay() {
                this.showConfirm = false
            },
            confirmBtn() {
                this.$router.push('/my_order')
            },
            cancelBtn () {
                setTimeout (() => {
                    this.showDialog = false
                    this.showMoneny = false
                }, 200)
            },
            selectBtn () {
                setTimeout (() => {
                    this.showDialog = false
                    this.showMoneny = false
                    this.showAddress = true
                }, 200)
            },
            sureBtn () {
                // setTimeout (() => {
                //     this.showDialog = false
                //     this.showAddress = true
                // }, 200)
                this.$router.push('/add_address')
            },
            cancelAddress () {
                this.showAddress = false
            },
            changePay (index) {
                this.curindex = index
                for (var i=0; i<this.payStyles.length; i++) {
                    this.payStyles[i].isRem = false
                }
                this.payStyles[index].isRem = this.payStyles[index].isRem == false ? true : true
            }
        }
    }
</script>
<style lang="less" scoped>
    .have-address-box {
        // height: 1.7rem;
        border-bottom: 0.15rem solid #efefef;
        font-size: 0.3rem;
        color: #282828;
        padding: 0.4rem 0.3rem;
        box-sizing: border-box;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            width: 0.38rem;
            height: 0.38rem;
            background: url(../../../assets/img/address-icon.png) no-repeat;
            background-size: 100%;
            left: 0.3rem;
            top: 50%;
            margin-top: -0.19rem;
        }
        .address-person {
            font-size: 0.3rem;
            color: #282828;
            margin: 0 0.8rem;
            margin-bottom: 0.1rem;
            span {
                margin-left: 0.2rem;
            }
        }
        .address-info {
            width: 5.7rem;
            margin-left: 0.8rem;
            font-size: 0.28rem;
            line-height: 0.32rem;
        }
        &::after {
            content: '';
            position: absolute;
            width: 0.12rem;
            height: 0.2rem;
            right: 0.3rem;
            top: 50%;
            margin-top: -0.06rem;
            background: url(../../../assets/img/next-icon.png) no-repeat;
            background-size: 100%;
        }
    }
    .no-adress-box {
        height: 1.2rem;
        line-height: 1.2rem;
        font-size: 0.3rem;
        color: #282828;
        padding: 0 0.3rem;
        border-bottom: 0.15rem solid #efefef;
        &::after {
            content: '';
            float: right;
            margin-top: 0.48rem;
            width: 0.12rem;
            height: 0.2rem;
            background: url(../../../assets/img/next-icon.png) no-repeat;
            background-size: 100%;
        }
    }
    .vip-card-order {
        height: 2.9rem;
        border-bottom: 0.15rem solid #efefef;
        .card-detail {
            padding: 0.3rem;
            border-bottom: 1px solid #ccc;
            font-size: 0;
            overflow: auto;
            img {
                width: 1.5rem;
                float: left;
            }
            .detail-intro {
                margin: 0 0 0 1.8rem;
                p {
                    color: #282828;
                    font-size: 0.3rem;

                    margin-bottom: 0.2rem;
                    .price {
                        float: left;
                        color: #ff2d41;
                        font-size: 0.28rem;
                    }
                    span {
                        float: right;
                        color: #282828;
                        font-size: 0.28rem;
                    }
                }
            }
        }
        .all-price {
            padding: 0 0.3rem;
            line-height: 1.4rem;
            color: #282828;
            font-size: 0.3rem;
            text-align: right;
            span {
                color: #ff2d41;
            }
        }
    }
    .pay-style-box {
        .title {
            color: #282828;
            font-size: 0.3rem;
            height: 0.8rem;
            line-height: 0.8rem;
            padding: 0 0.3rem;
            border-bottom: 1px solid #ccc;
        }
        
    }
    .footer-pay-box {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.8rem;
        line-height: 0.8rem;
        background: #29abae;
        color: #fff;
        font-size: 0.3rem;
        text-align: center;
    }
</style>